import React, { FC, useEffect } from 'react'
import { QuestionRadioPropsType,OptionType } from './interface.ts'
import { Form, Input, Checkbox, Select, Button, Space } from 'antd'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import {nanoid} from 'nanoid'


const PropComponent: FC<QuestionRadioPropsType> = (props: QuestionRadioPropsType) => {
    const { title, isVertical, value, options = [], onChange, disabled } = props
    const [form] = Form.useForm()

    useEffect(() => {
        form.setFieldsValue({ title, isVertical, value, options })
    }, [title, isVertical, value, options])

    const handleValuesChange = () => {
        if (onChange == null) return
        // 触发 onChange 函数
        const newValues = form.getFieldsValue() as QuestionRadioPropsType  // 就是 QuestionRadioPropsType格式不过对应的都有值
        console.log('newValues',newValues); 
        
        const { options = [] } = newValues
        options.forEach((opt:any) => {
            if(opt.value) return 
            opt.value = nanoid(5) // 5代表长度
        })
        onChange(newValues) // 同步过去 redux-store
    }

    return (
        <Form
            layout="vertical"
            initialValues={{ title, isVertical, value, options }}
            onValuesChange={handleValuesChange}
            disabled={disabled}
            form={form}
        >
            <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
                <Input />
            </Form.Item>
            <Form.Item label="默认选中" name="value">
                <Select value={value} options={options.map(({ text, value }) => ({ value, label: text || '' }))}></Select>
            </Form.Item>
            <Form.Item label="选项">
                <Form.List name="options">
                    {(fields:any, { add, remove }) => (
                        <>
                            {/* 遍历所有选项 可删除 */}
                            {fields.map(({ key, name, ...restField }, index:any) => (
                                <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                    <Form.Item
                                        {...restField}
                                        name={[name, 'text']}
                                        rules={[
                                            { required: true, message: '请输入选项文字' },
                                            {
                                                validator: (_, text) => {
                                                    const { options = [] } = form.getFieldsValue()
                                                    let num = 0
                                                    options.forEach((opt: OptionType) => {
                                                        if (opt.text === text) num++ // 记录 text 相同的个数，预期只有 1 个（自己）
                                                    })
                                                    if (num === 1) return Promise.resolve()
                                                    return Promise.reject(new Error('和其他选项重复了'))
                                                },
                                            },
                                        ]}
                                    >
                                        <Input placeholder="请输入选项文字..." />
                                    </Form.Item>
                                    {index > 1 &&
                                        <MinusCircleOutlined onClick={() => remove(name)} />
                                    }
                                </Space>
                            ))}
                            {/* 添加选项 */}
                            <Form.Item>
                                <Button type="link" onClick={() => add({ text: '', value: '' })} block icon={<PlusOutlined />}>
                                    添加选项
                                </Button>
                            </Form.Item>
                        </>
                    )}
                </Form.List>
            </Form.Item>
            <Form.Item name="isVertical" valuePropName="checked">
                <Checkbox>竖向排列</Checkbox>
            </Form.Item>
        </Form>
    )
}

export default PropComponent